<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="close"
    @open="fetch"
    width="50%"
    append-to-body
  >
    <Card>
      <span slot="title">角色切换</span>
      <div slot="content">
        <el-table
          :header-cell-style="{
            backgroundColor: 'rgb(229, 241, 253)',
            fontSize: '14px',
            color: '#666',
            fontWeight: '700',
          }"
          stripe
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column label="角色名称" prop="name"> </el-table-column>
          <el-table-column
            label="操作"
            header-align="left"
            align="left"
            width="200"
          >
            <template slot-scope="{ row }">
              <we-button
                size="mini"
                type="primary"
                v-if="row.isActive"
                identification=""
                @click="handleClickSwitch(row)"
                >切换</we-button
              >
              <span style="color: #ff3030; padding: 0 12px" v-else>当前</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </Card>
  </el-dialog>
</template>

<script>
import Card from '@/components/Card'
import { fetchRole, switchRole } from '@/api/changeRole'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    Card,
  },
  data() {
    return {
      // 分页数据
      total: 0,
      pagination: {
        pageNum: 1,
        pageSize: 8,
      },
      tableData: [],
    }
  },
  methods: {
    close() {
      this.$emit('update:dialogVisible', false)
    },
    fetch() {
      fetchRole({ sysCode: '131452024' }).then((response) => {
        if (response && response.code === 200) {
          const roleList = response.data['角色列表']
          roleList.map((item) => {
            item.isActive = true
            if (item.roleCode === response.data['当前角色']) {
              item.isActive = false
            }
          })
          this.tableData = roleList.filter((a) => a.sysCode === '131452024')
        }
      })
    },
    handleClickSwitch({ roleCode }) {
      switchRole({ roleCode, sysCode: '131452024' }).then((response) => {
        if (response) {
          sessionStorage.clear()
          this.$router.go(0)
          this.$message({
            type: 'success',
            message: response.msg,
          })
        }
      })
    },
  },
}
</script>
